<template>
  <page-meta :root-font-size="$rootFontSize"></page-meta>
  <view>
    <!--创建待办-->
    <view class="mx-4">
      <!-- <view class="rounded-md bg-gray py-2.5 mt-2.5">
        <view class="text-light text-xs mx-2.5"
          >创建待办，可以更高效处理问题</view
        >
      </view> -->
      <view class="rounded-md bg-gray py-2.5 mt-2.5">
        <view class="text-light text-xs mx-2.5">{{ kefuTip }}</view>
      </view>
      <view class="text-base text-dark leading-8 py-2"
        >类型<text class="text-red-400 ml-1">*</text></view
      >
      <view class="w-full relative" @click="showType = true">
        <view class="absolute right-2 top-3"
          ><u-icon name="arrow-down" color="#333333" size="32"></u-icon
        ></view>
        <view class="rounded leading-9 text-sm" style="border: 1px solid #ddd"
          ><text
            class="mx-2.5"
            :class="curType == 6 ? 'text-black' : 'text-gray'"
            >{{ curType == 6 ? '其他' : '请选择您要解决的问题类型' }}</text
          ></view
        >
      </view>
      <!-- <option-item
        :data="typeList"
        type="single"
        @update="typeSelect"
      ></option-item> -->
      <!--提现类型情况-->
      <view class="py-2.5 bg-gray rounded-md mt-1 mb-3.5" v-if="typeValue == 2">
        <view
          class="flex justify-center py-1.5"
          @click="isCash = true"
          v-if="isCashShow"
          ><u-icon
            name="plus"
            color="#999999"
            size="36rpx"
            class="mr-2.5"
          ></u-icon
          ><text class="text-light text-lg">添加订单</text></view
        >
        <view class="relative mx-2.5" v-else>
          <view class="z-10 absolute -right-1 -top-1" @click="cancelCashTo">
            <u-icon
              name="minus-circle-fill"
              color="#999999"
              size="30rpx"
            ></u-icon>
          </view>
          <view class="bg-white rounded-md py-2">
            <view class="flex justify-between mx-3">
              <view class="text-base text-dark leading-6">{{
                cashItemObj.type == 1 ? '提现' : '收益'
              }}</view>
              <view class="text-base text-dark font-medium leading-6"
                >{{ cashItemObj.type == 1 ? '-' : '+'
                }}{{ cashItemObj.amount }}</view
              >
            </view>
            <view class="flex justify-between mx-3">
              <view class="text-xs text-darkNormal leading-6">{{
                cashItemObj.createTime
              }}</view>
              <view class="text-xs text-darkNormal leading-6"
                ><text v-if="cashItemObj.status == 0 && cashItemObj.type == 1"
                  >处理中</text
                ><text
                  v-else-if="cashItemObj.status == 1 && cashItemObj.type == 1"
                  >成功</text
                ><text
                  v-else-if="cashItemObj.status == 2 && cashItemObj.type == 1"
                  >失败</text
                ><text v-else-if="cashItemObj.source == 1">商家</text
                ><text v-else-if="cashItemObj.source == 0">服务商</text></view
              >
            </view>
          </view>
        </view>
      </view>
      <!--收益类型情况-->
      <view class="py-2.5 bg-gray rounded-md mt-1 mb-3.5" v-if="typeValue == 3">
        <view
          class="flex justify-center py-1.5"
          @click="isOrder = true"
          v-if="isOrderShow"
          ><u-icon
            name="plus"
            color="#999999"
            size="36rpx"
            class="mr-2.5"
          ></u-icon
          ><text class="text-light text-lg">添加订单</text></view
        >
        <view class="relative mx-2.5" v-else>
          <view class="z-10 absolute -right-1 -top-1" @click="cancelOrderTo">
            <u-icon
              name="minus-circle-fill"
              color="#999999"
              size="30rpx"
            ></u-icon>
          </view>
          <view class="bg-white rounded-md py-2">
            <view class="flex justify-between mx-3">
              <view class="text-base text-dark leading-6">{{
                orderItemObj.type == 1 ? '提现' : '收益'
              }}</view>
              <view class="text-base text-dark font-medium leading-6"
                >{{ orderItemObj.type == 1 ? '-' : '+'
                }}{{ orderItemObj.amount }}</view
              >
            </view>
            <view class="flex justify-between mx-3">
              <view class="text-xs text-darkNormal leading-6">{{
                orderItemObj.createTime
              }}</view>
              <view class="text-xs text-darkNormal leading-6"
                ><text v-if="orderItemObj.status == 0 && orderItemObj.type == 1"
                  >处理中</text
                ><text
                  v-else-if="orderItemObj.status == 1 && orderItemObj.type == 1"
                  >成功</text
                ><text
                  v-else-if="orderItemObj.status == 2 && orderItemObj.type == 1"
                  >失败</text
                ><text v-else-if="orderItemObj.source == 1">商家</text
                ><text v-else-if="orderItemObj.source == 0">服务商</text></view
              >
            </view>
          </view>
        </view>
      </view>
      <view class="text-base text-dark leading-8 py-1"
        >描述<text class="text-red-400 ml-1">*</text></view
      >
      <view class="py-1 rounded-md" style="border: 1px solid #dddddd">
        <view class="mx-1">
          <u-textarea
            v-model="content"
            placeholder="请详细描述您遇到的问题"
            border="none"
            autoHeight
          ></u-textarea>
          <view class="flex mb-1 ml-2">
            <view class="flex" v-if="mediaVos.length > 0">
              <view
                class="relative mr-2.5"
                v-for="(item, index) in mediaVos"
                :key="index"
              >
                <image class="w-12 h-12 rounded-md" :src="item.src" />
                <view
                  class="z-10 absolute -right-1 -top-1"
                  @click="mediaVosDel(item)"
                >
                  <u-icon
                    name="minus-circle-fill"
                    color="#aaaaaa"
                    size="30rpx"
                  ></u-icon>
                </view>
                <view class="bg-white w-2.5 h-1 absolute -right-1 top-0"></view>
              </view>
            </view>
            <view v-if="mediaVos.length < 3" @click="uploadPhoto()"
              ><image class="w-12 h-12" src="/static/icons/icon-photo-add.png"
            /></view>
          </view>
        </view>
      </view>
      <view class="text-base text-dark leading-8 py-1 mt-2"
        >您的联系方式（选填）</view
      >
      <view>
        <u--input
          v-model="contactWay"
          fontSize="32rpx"
          color="#333333"
          placeholderStyle="color: #999999"
        >
        </u--input>
      </view>
      <!-- <view class="text-base text-dark leading-8 mt-4">您期待的处理方式</view> -->
      <!--处理方式：单选-->
      <!-- <list-item :data="planList" @update="planSelect"></list-item> -->
      <view class="mx-10 mt-12 pb-10">
        <view
          class="w-full bg-primary rounded-full leading-10 text-base h-10 text-center text-white bg-box-shadow"
          @click="submitTo"
          >提交</view
        >
      </view>
    </view>
    <!--上传类型弹窗-->
    <u-popup :show="isShow" @close="isShow = false" mode="bottom" :round="80">
      <view class="pt-6 pb-16 mx-7">
        <view class="flex">
          <view class="w-1/3">
            <view class="bg-lightGray w-16 h-16 rounded-md flex justify-center">
              <u-icon
                name="/static/icons/icon-photo-upload.png"
                size="60rpx"
              ></u-icon>
            </view>
            <view class="text-center text-sm text-dark mt-2.5 w-16">相册</view>
          </view>
          <view class="w-1/3 flex justify-center">
            <view>
              <view
                class="bg-lightGray w-16 h-16 rounded-md flex justify-center"
              >
                <u-icon
                  name="/static/icons/icon-camera-upload.png"
                  size="60rpx"
                ></u-icon>
              </view>
              <view class="text-center text-sm text-dark mt-2.5 w-16"
                >拍摄</view
              >
            </view>
          </view>
          <view class="w-1/3 flex justify-end">
            <view>
              <view
                class="bg-lightGray w-16 h-16 rounded-md flex justify-center"
              >
                <u-icon
                  name="/static/icons/icon-file-upload.png"
                  size="60rpx"
                ></u-icon>
              </view>
              <view class="text-center text-sm text-dark mt-2.5 w-16"
                >文件</view
              >
            </view>
          </view>
        </view>
      </view>
    </u-popup>
    <!--提现订单弹窗-->
    <u-popup :show="isCash" @close="isCash = false" mode="bottom" :round="80">
      <view
        class="mx-4 transitionLinear"
        :style="{
          height: +defaultHeight + 'vh',
        }"
      >
        <view class="flex justify-center py-2.5" @click="scaleToggle">
          <view class="common-bar"></view>
        </view>
        <view class="flex items-center mb-4">
          <view class="w-1/3"></view>
          <view class="w-1/3 text-center text-lg leading-10">添加订单</view>
          <view class="w-1/3 flex justify-end"
            ><u-icon name="search" size="48rpx" color="#000000"></u-icon
          ></view>
        </view>
        <!--组件：高度固定，默认10条数据，滚动加载更多-->
        <view v-if="cashList.length > 0">
          <scroll-view
            scroll-y="true"
            :class="defaultHeight == 50 ? 'h-44' : 'screenHeight70'"
            @scrolltolower="loadingDataCash"
          >
            <radio-item :data="cashList" @update="cashSelect"></radio-item>
          </scroll-view>
        </view>
        <!--组件：高度固定，默认10条数据，滚动加载更多-->
        <view class="pb-6" v-else>
          <b-empty text="- 暂无数据 -"></b-empty>
        </view>
        <view class="mx-12 pb-8 mt-6" v-if="cashList.length > 0">
          <view
            class="w-full bg-primary rounded-full leading-10 text-base h-10 text-center text-white bg-box-shadow"
            @click="confirmCashTo"
            >确定</view
          >
        </view>
      </view>
    </u-popup>
    <!--收益订单弹窗-->
    <u-popup :show="isOrder" @close="isOrder = false" mode="bottom" :round="80">
      <view
        class="mx-4 transitionLinear"
        :style="{
          height: +defaultHeight + 'vh',
        }"
      >
        <view class="flex justify-center py-2.5" @click="scaleToggle">
          <view class="common-bar"></view>
        </view>
        <view class="flex items-center mb-4">
          <view class="w-1/3"></view>
          <view class="w-1/3 text-center text-lg leading-10">添加订单</view>
          <view class="w-1/3 flex justify-end"
            ><u-icon name="search" size="48rpx" color="#000000"></u-icon
          ></view>
        </view>
        <!--组件：高度固定，默认10条数据，滚动加载更多-->
        <view v-if="orderList.length > 0">
          <scroll-view
            scroll-y="true"
            :class="defaultHeight == 50 ? 'h-44' : 'screenHeight70'"
            @scrolltolower="loadingDataOrder"
          >
            <radio-item :data="orderList" @update="orderSelect"></radio-item>
          </scroll-view>
        </view>
        <!--组件：高度固定，默认10条数据，滚动加载更多-->
        <view class="pb-6" v-else>
          <b-empty text="- 暂无数据 -"></b-empty>
        </view>
        <view class="mx-12 pb-8 mt-6" v-if="orderList.length > 0">
          <view
            class="w-full bg-primary rounded-full leading-10 text-base h-10 text-center text-white bg-box-shadow"
            @click="confirmOrderTo"
            >确定</view
          >
        </view>
      </view>
    </u-popup>
    <u-action-sheet
      :show="showType"
      :actions="typeOption"
      title="请选择您要解决的问题类型"
      @close="showType = false"
      @select="typeLiSelect"
    >
    </u-action-sheet>
  </view>
</template>

<script>
import { postFile } from '../../../services/file';
import {
  addSchedule,
  getScheduleBills,
  getKefuTip,
} from '../../services/customer';

export default {
  data() {
    return {
      kefuTip: '客服5分钟内必回复，10分钟内必处理上班时间：9:00-22:00',
      contactWay: '',
      curType: '',
      showType: false,
      typeOption: [
        {
          value: 6,
          name: '其他',
        },
      ],
      isLock: false,
      isShow: false,
      isCash: false,
      isCashShow: true,
      isOrder: false,
      isOrderShow: true,
      typeValue: 0,
      mediaVos: [],
      typeList: [
        { text: '提现', value: 2 },
        { text: '收益', value: 3 },
        { text: '邀请', value: 4 },
        { text: '建议', value: 5 },
        { text: '其他', value: 6 },
      ],
      content: '',
      planValue: [],
      planList: [
        { text: '尽快处理', value: 1 },
        { text: '尽快电话联系', value: 2 },
      ],
      cashItemObj: {},
      cashItem: undefined,
      cashList: [],
      orderItemObj: {},
      orderItem: undefined,
      orderList: [],
      target: undefined,
      cashPageNum: 1,
      cashPageSize: 10,
      infiniteEndedCash: false,
      orderPageNum: 1,
      orderPageSize: 10,
      infiniteEndedOrder: false,
      defaultHeight: 50,
    };
  },
  async created() {
    this._getKefuTip();
    //this._getBillsIncome(this.orderPageNum);
    //this._getBillsCash(this.cashPageNum);
  },
  methods: {
    async _getKefuTip() {
      const { code, data } = await getKefuTip();
      if (code != 200) return;
      this.kefuTip = data;
    },
    //选择事件
    typeLiSelect(e) {
      this.curType = e.value;
    },
    //缩放
    scaleToggle() {
      if (this.defaultHeight == 50) {
        this.defaultHeight = 92;
      } else {
        this.defaultHeight = 50;
      }
    },
    //滚动到底加载更多数据
    loadingDataOrder() {
      this._getBillsIncome(this.orderPageNum);
    },
    loadingDataCash() {
      this._getBillsCash(this.cashPageNum);
    },
    //添加图片（最多上传三张，目前只有图片）
    uploadPhoto() {
      uni.chooseImage({
        count: 1, //默认9
        sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
        success: async ({ tempFiles, tempFilePaths }) => {
          // #ifdef H5
          const file = tempFiles[0];
          // #endif
          // #ifndef H5
          const file = tempFilePaths[0];
          // #endif
          //console.log(file);
          const { code, data } = await postFile(file, 'other');
          if (code != 200) return;
          let params = {
            type: 0,
            url: data.path,
            src: data.httpUrl,
          };
          this.mediaVos.push(params);
        },
      });
    },
    //移除已上传（预览）图片
    mediaVosDel(item) {
      let index = this.mediaVos.indexOf(item);
      if (index !== -1) {
        this.mediaVos.splice(index, 1);
      }
    },
    //获取用户的账单列表:收益
    async _getBillsIncome(orderPageNum) {
      if (this.infiniteEndedOrder) return;
      const { code, data } = await getScheduleBills({
        pageNum: orderPageNum,
        pageSize: this.orderPageSize,
        type: 0,
      });
      if (code != 200) return;
      this.orderList.push(...data.rows);
      this.orderPageNum++;
      if (data.rows.length < this.orderPageSize) this.infiniteEndedOrder = true;
    },
    //获取用户的账单列表:提现
    async _getBillsCash(cashPageNum) {
      if (this.infiniteEndedCash) return;
      const { code, data } = await getScheduleBills({
        pageNum: cashPageNum,
        pageSize: this.cashPageSize,
        type: 1,
      });
      if (code != 200) return;
      this.cashList.push(...data.rows);
      this.cashPageNum++;
      if (data.rows.length < this.cashPageSize) this.infiniteEndedCash = true;
    },
    //获取处理方式列表
    async _getCustomizeLabel() {
      const { code, data } = await getCustomizeLabel({ type: 1 });
      if (code != 200) return;
      //this.planList = data;
      //console.log(data);
      //接口返回数据处理 => 组件需求数据映射
    },
    //路由跳转
    goTo(url) {
      this.$Router.push({
        name: url,
      });
    },
    //类型选择
    typeSelect(valueArr, textArr) {
      this.typeValue = valueArr[0];
      //提现&收益类型逻辑处理 => 显示
      if (this.typeValue != 2) {
        this.cashItemObj = {};
        this.isCashShow = true;
      }
      if (this.typeValue != 3) {
        this.orderItemObj = {};
        this.isOrderShow = true;
      }
      //提现&收益类型逻辑处理 => 显示
    },
    //处理选择
    planSelect(valueArr, textArr) {
      //this.planValue = valueArr[0];
      this.planValue = textArr;
    },
    //提现订单选择
    cashSelect(valueArr) {
      this.cashItem = valueArr[0];
    },
    //确认提现订单
    confirmCashTo() {
      if (this.cashItem == undefined) {
        uni.showToast({
          title: '请添加订单',
          icon: 'none',
        });
        return;
      }
      this.cashItemObj = this.cashItem;
      this.isCash = false;
      this.isCashShow = false;
    },
    //移除提现订单
    cancelCashTo() {
      this.cashItemObj = {};
      this.isCashShow = true;
    },
    //收益订单选择
    orderSelect(valueArr) {
      this.orderItem = valueArr[0];
    },
    //确认收益订单
    confirmOrderTo() {
      if (this.orderItem == undefined) {
        uni.showToast({
          title: '请添加订单',
          icon: 'none',
        });
        return;
      }
      this.orderItemObj = this.orderItem;
      this.isOrder = false;
      this.isOrderShow = false;
    },
    //移除收益订单
    cancelOrderTo() {
      this.orderItemObj = {};
      this.isOrderShow = true;
    },
    //提交
    async submitTo() {
      if (this.curType == '') {
        uni.showToast({
          title: '请选择您要解决的问题类型',
          icon: 'none',
        });
        return;
      }
      if (this.content == '') {
        uni.showToast({
          title: '请详细描述您遇到的问题',
          icon: 'none',
        });
        return;
      }
      //判断下如果有填写联系方式校验下手机号是否正确
      if (this.contactWay) {
        if (!uni.$u.test.mobile(this.contactWay)) {
          uni.showToast({
            title: '请输入正确的联系方式',
            icon: 'none',
          });
          return;
        }
      }
      // if (this.planValue.length == 0) {
      //   uni.showToast({
      //     title: '请选择您期待的处理方式',
      //     icon: 'none',
      //   });
      //   return;
      // }
      //判断是否为提现类型
      // if (this.typeValue == 2 && this.isCashShow) {
      //   uni.showToast({
      //     title: '请添加提现订单',
      //     icon: 'none',
      //   });
      //   return;
      // } else if (this.typeValue == 2 && !this.isCashShow) {
      //   this.target = this.cashItemObj.id;
      // }
      //判断是否为收益类型
      // if (this.typeValue == 3 && this.isOrderShow) {
      //   uni.showToast({
      //     title: '请添加收益订单',
      //     icon: 'none',
      //   });
      //   return;
      // } else if (this.typeValue == 3 && !this.isOrderShow) {
      //   this.target = this.orderItemObj.id;
      // }
      //console.log(this.target);
      //判断是否有上传图片，有的话数据处理再提交
      let media = [];
      if (this.mediaVos.length > 0) {
        media = this.mediaVos.map((item) => {
          delete item.src;
          return item;
        });
      }
      //处理方式数据处理
      // let expectHandle = {};
      // this.planList.map((item) => {
      //   expectHandle[item.text] = false;
      // });
      // this.planValue.map((item) => {
      //   Object.keys(expectHandle).forEach((key) => {
      //     if (key == item) {
      //       expectHandle[key] = true;
      //     }
      //   });
      // });
      //提交 => 使用锁定机制:有效防止用户快速点击导致事件的异常执行。
      if (this.isLock) {
        //已经被锁定了，不能再次执行事件
        return;
      }
      this.isLock = true;
      //判断一下
      // if (this.target == undefined) {
      //   this.target = '';
      // }
      //如果没有传输图片就不要给后台[] 即 没有 就不传输对象里的那个media属性
      let params = {
        content: this.content,
        //expectHandle: JSON.stringify(expectHandle),
        type: this.curType,
        //target: this.target,
        contactWay: this.contactWay,
        userType: 'buy',
      };
      if (media.length > 0) {
        params.media = media;
      }
      //console.log(params);
      const { code, data } = await addSchedule(params);
      if (code != 200) return;
      uni.$u.toast('提交成功');
      setTimeout(() => {
        //在事情处理完后再解锁
        this.isLock = false;
        this.$Router.replaceAll({
          name: 'schedule-messages',
        });
      }, 500);
    },
  },
};
</script>

<style lang="less" scoped>
/deep/ .uni-textarea-textarea {
  font-size: 24rpx;
  //background-color: #f2f2f2;
}
.screenHeight70 {
  height: 68vh;
}
</style>
